<template>
    <div class="flow">
        <div class="content">
            <!--左侧工具栏-->
            <div id="stencil">
                <div id="nodebody">
                    <div class="nodeType">输入</div>
                    <div>
                        <ur>
                            <!-- 节点 -->
                            <li style="width: 180px; height: 36px;"> 
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">输入节点</span>
                                    <span>
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                            <li style="width: 180px; height: 36px;">
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">输出节点</span>
                                    <span class="status">
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                            <li style="width: 180px; height: 36px;">
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">筛选节点</span>
                                    <span class="status">
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                        </ur>
                    </div>
                    <div class="nodeType">输出</div>
                    <div>
                        <ur>
                            <!-- 节点 -->
                            <li style="width: 180px; height: 36px;"> 
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">输入节点</span>
                                    <span>
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                            <li style="width: 180px; height: 36px;">
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">输出节点</span>
                                    <span class="status">
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                            <li style="width: 180px; height: 36px;">
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">筛选节点</span>
                                    <span class="status">
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                        </ur>
                    </div>
                    <div class="nodeType">数据处理</div>
                    <div>
                        <ur>
                            <!-- 节点 -->
                            <li style="width: 180px; height: 36px;"> 
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">输入节点</span>
                                    <span>
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                            <li style="width: 180px; height: 36px;">
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">输出节点</span>
                                    <span class="status">
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                            <li style="width: 180px; height: 36px;">
                                <div class="node">
                                    <img
                                        src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ">
                                    <span class="label">筛选节点</span>
                                    <span class="status">
                                        <img
                                            src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ">
                                    </span>
                                </div>
                            </li>
                        </ur>
                    </div>
                </div>
            </div>
            <div class="panel">
                <!--流程图工具栏-->
                <div class="toolbar">
                    <el-button type="primary" size="mini" @click="mix">缩小</el-button>
                    <el-button type="primary" size="mini" @click="big">放大</el-button>
                    <el-button type="primary" size="mini" @click="centeCon">对齐</el-button>
                    <!-- <tool-bar v-if="isReady" /> -->
                </div>
                <!--流程图画板-->
                <div id="container" />
            </div>
            <!--右侧工具栏-->
            <div class="config">
                <!-- <config-panel v-if="isReady" /> -->
            </div>
        </div>
    </div>
</template>
   
<script>
import { Graph } from '@antv/x6';

const data = {
    // 节点
    nodes: [
        {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40,       // Number，必选，节点位置的 x 值
            y: 40,       // Number，必选，节点位置的 y 值
            width: 80,   // Number，可选，节点大小的 width 值
            height: 40,  // Number，可选，节点大小的 height 值
            label: 'hello', // String，节点标签
        },
        {
            id: 'node2', // String，节点的唯一标识
            x: 160,      // Number，必选，节点位置的 x 值
            y: 180,      // Number，必选，节点位置的 y 值
            width: 80,   // Number，可选，节点大小的 width 值
            height: 40,  // Number，可选，节点大小的 height 值
            label: 'world', // String，节点标签
        },
    ],
    // 边
    edges: [
        {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
            attrs: {
                line: {
                    stroke: 'orange',
                },
            },
        },
    ],
};


export default {
    name: "index",
    data() {
        return {
            graph: null,
            node: data.node,
            edges: data.edges,

        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.graph = new Graph({
                container: document.getElementById('container'),
                width: 800,
                height: 600,
                // 背景颜色
                background: {
                    color: '#fffbe6', // 设置画布背景颜色
                },
                // 网格设置
                grid: {
                    size: 10,      // 网格大小 10px
                    visible: true, // 渲染网格背景
                },
                // 画布平移
                panning: {
                    enabled: true,
                    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
                },

            });

            this.graph.fromJSON(data)
            this.graph.zoom(-0.5)
        },
        // 画布放大
        big() {
            this.graph.zoom(0.5)
            this.graph.translate(80, 40)
        },
        mix() {
            this.graph.zoom(-0.5)
        },
        centeCon() {
            // 将画布内容中心与视口中心对齐
            this.graph.centerContent()
        }

    }
}

</script>
   
<style  lang="less" scoped>
.flow {
    width: 100vw;
    height: 100vh;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
}

#stencil {
    width: 230px;
    height: 100%;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.panel {
    width: calc(100% - 580px);
    height: 100%;
}

.panel .toolbar {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    background-color: #f7f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.panel #container {
    width: 100%;
    height: calc(100% - 38px);
}


.config {
    width: 290px;
    height: 100%;
    padding: 0 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}


#nodebody {
    width: 200px;
    margin: 0 auto;
    padding-right: 0;
    /* background-color: red; */
}

.nodeType{
    margin-top: 20px;
   line-height: 30px;
   font-size: 15px;
   color: #72747a;
}

/* 节点 */
.node {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #c2c8d5;
    /* border-left: 4px solid #bfcbe7; */
    border-radius: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
    margin-top: 5px;
    &:hover{
          border-left: 4px solid #bfcbe7; 
    }
}

.node img {
    width: 20px;
    height: 20px;

    margin-left: 8px;
}

.node .label {
    display: inline-block;
    flex-shrink: 0;
    width: 104px;
    margin-left: 8px;
    color: #666;
    font-size: 12px;
}

.node .status {
    flex-shrink: 0;
}

ur li {
    list-style-type: none
}
</style>